<template>
    <div class="login_container">
        <div class="login_win">
            <div class="login_left">
                <div class="left_title">iTP智能交易平台</div>
                <div class="left_desc">intelligent Trading Platform</div>                
            </div>
            <el-form class="login_form">
                <el-form-item class="login_title">
                    <svg-icon name="logo_itp" width="35px" height="25px" class="logo"></svg-icon>
                    <text>iTP系统登陆</text>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.account" placeholder="请输入用户名" size="large" class="input_name" @keydown.enter="login">
                        <template #prefix>
                            <i-ep-User />
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input type="password" v-model="form.password" placeholder="请输入密码" size="large" show-password @keydown.enter="login">
                        <template #prefix>
                            <i-ep-Lock />
                        </template>
                    </el-input>
                </el-form-item>
                <div class="forget_pswd">
                    <el-link type="primary" style="color: #2468F2">忘记密码</el-link>
                </div>
                <el-button :loading="loading" color="#2468F2" class="login_button" type="primary" size="large"
                    shouldAddSpace="true" style="width: 351px" @click="login">登 陆
                </el-button>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user'
import useDictStore from '@/store/modules/dict'
import { useRouter,useRoute } from 'vue-router'
import { Md5 } from 'ts-md5/src/md5'

let userStore = useUserStore();
let dictStore = useDictStore();
let loading = ref(false);
let $router = useRouter();
let $route = useRoute();

const form = reactive({
    account: '',
    password: null,    
});

const login = async () => {
    try {
        loading.value = true;
        if(!form.account){
            ElMessage({
                message: '请输入用户名！',
                type: 'error',
            });
        }else if(!form.password){
            ElMessage({
                message: '请输入密码！',
                type: 'error',
            });
        }else{
            await userStore.userLogin({
                account: form.account,
                password: Md5.hashStr(form.password)                
            });
            if(userStore.token) {    
                await userStore.getUserInfo();
                await dictStore.getDictList([]);  
            };
            //登陆成功后跳转页面
            //编程式导航跳转数据首页
            let redirect = $route.query.redirect as string;
            $router.push({path:redirect ||'/'});
            //登陆成功提示信息
            ElMessage({
                message: '登陆成功',
                type: 'success',
            });            
        }      
        loading.value = false;  
    } catch (error) {
        // console.log(error);
        //登陆失败加载效果消失 
        loading.value = false;

        // ElMessage({
        //     message: (error as Error).message,
        //     type: 'error',
        // });
    }

};

</script>

<style scoped lang="scss">
.login_container {
    width: 100vw;
    height: 100vh;
    min-width: 900px;
    min-height: 600px;
    background: url('@/assets/images/login/background.png') no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;

    .login_win {
        width: 820px;
        height: 514px;
        background: url('@/assets/images/login/login-win.png') no-repeat;
        background-size: cover;
        filter: drop-shadow(0px 0px 20px rgba(0, 37, 140, 0.12));
        .login_left{
            width: 349px;
            height: 514px;
            float: left;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            .left_title{
                color: #E2E4EF;
                font-size: 26px;
                font-weight: 600;
            }
            .left_desc{
                margin-top: 20px;
                color: #E2E4EF;
                font-size: 16px;
            }
        }
        .login_form {
            width: 471px;
            height: 514px;
            float: right;
            padding: 120px 60px;

            .login_title {
                margin-bottom: 35px;                
                .logo{
                    margin-left: 75px;
                }
                text {
                    color: #2468F2;                                                        
                    font-weight: 700;
                    font-size: 24px;
                    line-height: 35px;
                    margin: 0 10px;
                }
            }

            .forget_pswd {
                display: flex;
                justify-content: flex-end;
                margin-bottom: 20px;
            }

            .input_name {
                margin-bottom: 10px;
            }

            :deep(.el-input__wrapper){ 
                padding: 0 15px;
                background-color: #fff !important; 
                border-color: #E2E4EF !important;
                box-shadow: none;
                border-radius: 0;
                border-bottom: 1px solid #dcdfe6 !important;
                &:hover{
                    border-bottom: 1px solid #409eff !important;
                }
            }
        }
    }
}
:deep(.el-input__inner) {
  -webkit-box-shadow: 0 0 0 100px #fff inset;
}
</style>
